<template>
  <div class="searchbox">
    <!-- <a-divider type="vertical" /> -->
    <div :class="['search-input-box', { 'show-input-box': showInput }]">
      <img
        src="@/assets/img/search.png"
        :class="{ 'search-img': showInput }"
        alt=""
        @click="showInputFn"
      />
      <a-input
        ref="inputRef"
        class="search-input"
        v-model.trim:value="inputText"
        :max-length="900"
        :placeholder="placeholder"
        @pressEnter="onSearch"
        @click="onClickInput($event)"
        @change="onInput"
        v-if="showInput"
      >
      </a-input>
      <i
        v-if="showInput"
        class="el-icon-close close-input"
        @click.self="clsIpt"
      ></i>
    </div>
  </div>
</template>

<script>
import { PLACEHOLDER_SELECT } from "@/config/const";
export default {
  name: "CarSearch",
  data() {
    return {
      PLACEHOLDER_SELECT,
      inputText: this.input,
      inputWrap: "Off"
    };
  },
  props: {
    input: {
      type: String,
      default: ""
    },
    showInput: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ""
    }
  },
  watch: {
    input(val) {
      this.inputText = val;
    }
  },
  mounted() {},
  computed: {},
  methods: {
    showInputFn() {
      this.$emit("switchShowInput");
    },
    onSearch(e) {
      this.$emit("onSearch", e.target.value);
    },
    clsIpt(){
        this.showInputFn()
        this.$emit('clsIpt')
      },
    // onFouceInput(e) {

    // },
    onBlurInput(e) {
      console.log(e, 2);
      this.inputWrap = "Off";
    },
    onClickInput() {
      this.inputWrap = "Virtual";
    },
    onInput(e) {
      // this.input = e.target.value;
      this.$emit("change", e.target.value);
    }
  }
};
</script>

<style lang="less" scoped>
.searchbox {
  display: flex;
  align-items: center;

  .search-input-box {
    position: relative;
    padding: 2px;

    .search-img {
      width: 30px;
    }

    .search-input {
      position: relative;
      height: 32px;
      padding: 7px;
      border: none;
      outline: none;
      box-shadow: none;
      resize: none;
      margin-left: 5px;
    }

    .close-input {
      font-weight: bold;
      padding: 2px 5px;
      cursor: pointer;
      color: #3d6cf7;
    }
  }

  .show-input-box {
    height: 34px;
    display: flex;
    align-items: center;
    width: 383px;
    padding: 2px 8px 2px 2px;
    border: 1px solid #3d6cf7;
    border-radius: 6px;
    background-color: #fff;
  }
}
</style>
